<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <a-col :span="24">
        <a-card title="详情">
          <template #extra>
            <a-button type="primary" class="ml-5" @click="edit()">编辑</a-button>
          </template>
          <a-row>
            <a-col :span="20">
              <a-row>
                <a-col :span="8">
                  <a-form-item>学生姓名：{{formState.data.stuName}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>意向学校：{{formState.data.school}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>年份：{{formState.data.yuarDate}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>季度：{{formState.data.quarter}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>项目：{{formState.data.project}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>意向课程：{{formState.data.course}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>定价金额：{{formState.data.deposit}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>汇率：{{formState.data.rmbRate}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>付款时间：{{formState.data.payTime}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>付款方式：{{formState.data.payChn}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>付款账号：{{formState.data.sourceAcc}}</a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item>收款账号：{{formState.data.desAcc}}</a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item>收款凭证</a-form-item>
                  <a-image :width="200" :src="formState.data.payUrl" />
                </a-col>
                <a-col :span="24">
                  <a-form-item>备注：{{formState.data.remark}}</a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>
<script>
  import {
    defineComponent,
    reactive,
    toRaw,
    createVNode,
    onMounted,
    ref,
    onActivated
  } from "vue";
  import {
    useRoute,
    useRouter
  } from 'vue-router';
  import {
    selectById
  } from "@/api/module/student/deposit-manage";
  import {
    message
  } from 'ant-design-vue';
  import moment from 'moment'
  import {
    getDictByCodesReturnObj
  } from '@/tools/get-dict'
  import {
    isEmpty
  } from '@/tools/common'
  import dictEnum from "@/const/dict"
  export default {
    setup() {
      const router = useRouter();
      const route = useRoute();
      const formState = reactive({
        data: {}
      })
      const baseFields = reactive({
        dict: {}
      })
      const getDataByDict = (data, dictKey) => {
        if (isEmpty(data)) return '-'
        const item = baseFields.dict[dictKey].find(v => v.value == data)
        if (isEmpty(item)) return '-'
        return item.label
      }
      onActivated(async () => {
        baseFields.dict = await getDictByCodesReturnObj([
          dictEnum.YEARS,
          dictEnum.QUARTER,
          dictEnum.PAY_TYPE,
        ])
        let res = await selectById({
          id: route.query.id
        })
        res.data.yuarDate = getDataByDict(res.data.yuarDate, dictEnum.YEARS)
        res.data.quarter = getDataByDict(res.data.quarter, dictEnum.QUARTER)
        res.data.payChn = getDataByDict(res.data.payChn, dictEnum.PAY_TYPE)
        res.data.payTime = moment(res.data.payTime).format('YYYY-MM-DD')
        formState.data = res.data;
        console.log(formState.data)
      })
      const edit = () => {
        router.push({
          path: '/studentrtv/deposit-manage/add',
          query: {
            id: route.query.id
          }
        })
      }
      return {
        edit,
        formState,
      }
    }
  }
</script>
<style scoped>
  .ant-form-item {
    margin-bottom: 0x;
    margin: 10px 0;
  }

  .pre-title {
    padding: 10px 25px;
    background-color: #f5f5f5;
    color: #555;
  }
</style>
